<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪类</title>
    <style>
      a:link {
        color: red;
      }
      a:visited {
        color: yellow;
      }
      a:hover {
        color: blue;
      }
      a:active {
        color: green;
      }
      input:focus {
        outline: none;
      }

      input:hover {
        background: blue;
      }

      input:active {
        background: yellow;
      }
      div {
        height: 900px;
        border: solid 1px #ddd;
      }
      div:target {
        color: red;
      }
      li {
        border: solid 2px #ddd;
      }
      li:empty {
        display: none;
      }
    </style>
  </head>
  <body>
    <main>
      <ul>
        <li> 后盾人</li>
        <li> </li>
        <li></li>
      </ul>
      <p></p>
      <p></p>
      <a href="https://www.houdunren.com"> 后盾人</a>
      <input type="text" />
      <a href="#hdcms">hdcms</a>
      <div></div>
      <div id="hdcms">hdcms 管理系统由后盾人推出</div>
      <article>
        <h1 title>后盾人</h1>
        <h2>hdcms.com</h2>
        <aside>
          <h2>houdunren.com</h2>
        </aside>
        <h2>hdcms.com</h2>
      </article>
    </main>
  </body>
</html>
